Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / map / internal / MapMobileNoteModal.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<transition Te6edf3name=Ta5d6ff"fade"Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"show"

Te6edf3class=Ta5d6ff"fixed inset-0 z-100 flex items-end sm:items-center justify-center p-4 bg-black/50 backdrop-blur-xs"

@Te6edf3click.self=Ta5d6ff"$emit('close')"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"bg-white dark:bg-zinc-900 w-full max-w-lg rounded-t-2xl sm:rounded-2xl shadow-2xl overflow-hidden animate-slide-up sm:animate-fade-in"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between"Tff7b72>

Tff7b72<h3 Te6edf3class=Ta5d6ff"text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"note-edit" Te6edf3class=Ta5d6ff"size-5 text-amber-500" Tff7b72/>

Edit Note

Tff7b72</h3>

Tff7b72<button

Te6edf3class=Ta5d6ff"p-2 text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-full transition-colors"

@Te6edf3click=Ta5d6ff"$emit('close')"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"close" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4"Tff7b72>

Tff7b72<textarea

Te6edf3:value=Ta5d6ff"text"

Te6edf3class=Ta5d6ff"w-full h-40 p-4 text-base bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-hidden resize-none text-gray-900 dark:text-zinc-100"

Te6edf3placeholder=Ta5d6ff"Type your note here..."

autofocus

@Te6edf3input=Ta5d6ff"$emit('update:text', $event.target.value)"

Tff7b72>Tff7b72</textarea>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 bg-gray-50 dark:bg-zinc-800/50 flex justify-between gap-3"Tff7b72>

Tff7b72<button

Te6edf3class=Ta5d6ff"flex-1 px-4 py-3 text-sm font-bold text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20 rounded-xl transition-colors flex items-center justify-center gap-2"

@Te6edf3click=Ta5d6ff"$emit('delete')"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"trash-can-outline" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Delete

Tff7b72</button>

Tff7b72<button

Te6edf3class=Ta5d6ff"flex-2 px-4 py-3 text-sm font-bold bg-amber-500 text-white hover:bg-amber-600 rounded-xl shadow-lg shadow-amber-500/30 transition-colors"

@Te6edf3click=Ta5d6ff"$emit('save')"

Tff7b72>

Save Note

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</transition>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

export default {

name: "MapMobileNoteModal",

components: {

MaterialDesignIcon,

},

props: {

show: {

type: Boolean,

default: false,

},

text: {

type: String,

default: "",

},

},

emits: ["close", "save", "delete", "update:text"],

};

Tff7b72</script>